<template>
  <div>
    <!--    <el-badge style="line-height: 25px;margin-top: -5px;" :value="10" :max="99" @click.native="dialogTableVisible=true">-->
    <!--      <svg-icon class-name="header-notice-class" icon-class="header-notice" @click.stop="click" />-->
    <!--    </el-badge>-->
    <el-popover
      v-model="isShow"
      placement="bottom"
      title="未读消息"
      width="200"
      trigger="click"
    >
      <!--      图标-->
      <el-badge
        slot="reference"
        :hidden="unread.length == 0"
        style="line-height: 25px; margin-top: -5px"
        :value="unread.length"
        :max="99"
        @click.native="dialogTableVisible = true"
      >
        <svg-icon class-name="header-notice-class" icon-class="header-notice" />
      </el-badge>
      <template slot="content">内容</template>
      <!--      消息列表-->
      <el-table :data="unread" :show-header="false" @row-click="goDetail">
        <el-table-column
          width="150"
          property="messageTitle"
          label="消息标题"
        ></el-table-column>
      </el-table>
      <el-button style="width: 100%; background-color: #eff1f3" size="mini">
        <el-link @click="goDetail({ id: -1 })">更多</el-link>
      </el-button>
    </el-popover>
  </div>
</template>

<script>
  import { getAction, deleteAction, postAction, putAction } from '@/api/action'
  import { BaseListMixin } from '@/mixins/BaseListMixin'

  export default {
    name: 'HeaderNotice',
    mixins: [BaseListMixin],
    data() {
      return {
        dialogTableVisible: false,
        isShow: false,
        unread: [],
        messageURL: '/cluster/messageList',
        url: {
          listPage: '/presoftasim/clusterMonitor/messageList/unread',
        },
        queryParam: {
          id: this.$store.state.user.id,
          userName: this.$store.state.user.name,
          messageTitle: '',
          creatUserName: '',
          type: 'all',
          readIDs: [],
        },
        gridData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            id: 1,
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            id: 2,
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            id: 3,
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            id: 4,
          },
        ],
      }
    },
    computed: {
      errorLogs() {
        return this.$store.getters.errorLogs
      },
      handleread() {
        return this.$store.state.user.handleread
      },
    },
    watch: {
      handleread: function (val) {
        this.getData()
      },
    },
    mounted() {
      this.getData()
    },
    methods: {
      goDetail: function (row, event, column) {
        console.log(row)
        this.isShow = false
        this.$router.push({
          path: this.messageURL,
          query: { messageID: row.id },
        })
      },
      getData: function () {
        getAction(this.url.listPage, this.queryParam).then((res) => {
          if (res.code == 200) {
            this.listLoading = false
            this.unread = res.data.records
          } else {
            this.submitFail(res.message)
          }
        })
      },
    },
  }
</script>

<style scoped>
  .message-title {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    padding-right: 8px;
  }

  .header-notice-class {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }
</style>
